<script setup>
import { useRouter } from "vue-router";
import { useHomePageStore } from "@/stores/homePage/index.js";
import { storeToRefs } from "pinia";
import { ref, onMounted, defineExpose } from "vue";
import searchComTop from "@/components/searchComTop.vue";
// import router from "@/router";
const router = useRouter();
const { userArr, userId, saying } = storeToRefs(useHomePageStore());
const { getUserDate, exitUser, sayingArr } = useHomePageStore();

// 获取用户数据和语录
onMounted(() => {
  getUserDate();
  sayingArr();
});

setInterval(() => {
  sayingArr();
}, 100000);

const dropdown1 = ref(null);
function showClick() {
  let id = localStorage.getItem("userId") || "null";
  if (!id || id === "null") {
    router.push("/login");
  } else {
    if (!dropdown1.value) return;
    dropdown1.value.handleOpen();
  }
}

const dialogTableVisible = ref(false);
//侧边栏是否展开
const asideFlag = ref(true);
defineExpose({
  asideFlag,
});
defineProps({ flag: Boolean });
</script>

<template>
  <div class="topNav" :class="flag ? 'flag' : ''">
    <div class="topNav_left">
      <i
        class="iconfont icon-caidan asideIcon"
        v-if="asideFlag"
        @click="asideFlag = false"
      ></i>
      <i class="iconfont icon-cebianlan asideIcon" v-else @click="asideFlag = true"></i>
    </div>
    <div class="topNav_right">
      <!-- 语录 -->
      <div class="sayings">{{ saying }}</div>

      <!-- 个人中心 -->
      <div class="user">
        <el-dropdown ref="dropdown1" trigger="click">
          <img
            :src="userArr?.img || '/src/assets/images/avatars/Avatar.png'"
            :title="userArr?.username || '未登录'"
            @click="showClick()"
          />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/user/personalData')">
                <el-icon><UserFilled /></el-icon>个人资料
              </el-dropdown-item>
              <el-dropdown-item @click="router.push('/user/myMessage')">
                <el-icon><Bell /></el-icon>站内消息
              </el-dropdown-item>
              <el-dropdown-item @click="router.push('/user/myLike')">
                <el-icon><StarFilled /></el-icon>我的收藏
              </el-dropdown-item>
              <el-dropdown-item @click="router.push('/user/saveSetting')">
                <el-icon><Tools /></el-icon>安全设置
              </el-dropdown-item>
              <hr />
              <el-dropdown-item @click="exitUser">
                <el-icon><CircleCloseFilled /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- 搜索按钮 -->
      <div class="topNav_search">
        <i class="iconfont icon-sousuo" @click="dialogTableVisible = true"></i>
        <el-dialog v-model="dialogTableVisible" width="800">
          <searchComTop></searchComTop>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/homePage/topNav/index.scss");
</style>
